<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="我的收藏"></fa-navbar>
		<u-sticky :enable="false">
			<!-- 用户信息 -->
			<fa-user-header :user="vuex_user"></fa-user-header>
			<!-- 内容分类 -->
			<!-- #ifdef MP-BAIDU -->
			<view class="" v-if="theme.bgColor">
				<fa-u-tabs :list="list" height="85" :is-scroll="false" :bar-width="barwidth" :active-color="theme.bgColor" :current="current" @change="change"></fa-u-tabs>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-BAIDU -->
			<u-tabs :list="list" height="85" :is-scroll="false" :bar-width="barwidth" :active-color="theme.bgColor" :current="current" @change="change"></u-tabs>
			<!-- #endif -->
		</u-sticky>
		<!-- 我收藏的问题 -->
		<view class="u-p-t-30 u-p-l-30 u-p-r-30" v-if="!current">
			<view class="u-p-30 answer-item u-m-b-30" v-for="(item, index) in questionList" :key="index" @click="goPage(0, item.source_id)" v-if="item.question">
				<view class="question">
					<u-tag :bg-color="theme.lightColor" :border-color="theme.faBorderColor" :color="theme.bgColor" text="问" mode="light" size="mini" />
					<text class="u-m-l-20">{{ item.question && item.question.title }}</text>
				</view>
				<view class="u-m-t-30 u-tips-color u-font-22 u-line-3">
					<u-parse :html="item.question && item.question.content_fmt" :tag-style="vuex_parse_style" :domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''" @linkpress="navigate"></u-parse>
				</view>
			</view>
		</view>
		<!-- 我收藏的答案 -->
		<view class="u-p-t-30 u-p-l-30 u-p-r-30" v-else-if="current == 1">
			<view class="u-p-30 answer-item u-m-b-30" v-for="(item, index) in answerList" :key="index" @click="goPage(0, item.source_id)" v-if="item.question">
				<view class="question">
					<u-tag :bg-color="theme.lightColor" :border-color="theme.faBorderColor" :color="theme.bgColor" text="问" mode="light" size="mini" />
					<text class="u-m-l-20">{{ item.question && item.question.title }}</text>
				</view>
				<view class="u-m-t-30 u-tips-color u-font-22 u-line-3">
					<u-parse :html="item.answer && item.answer.content_fmt" :tag-style="vuex_parse_style" :domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''" @linkpress="navigate"></u-parse>
				</view>
			</view>
		</view>
		<!-- 我收藏的文章 -->
		<view class="u-p-t-30 u-p-l-30 u-p-r-30" v-else-if="current == 2">
			<view class="u-p-30 answer-item u-m-b-30" v-for="(item, index) in articleList" :key="index" @click="goPage(1, item.source_id)" v-if="item.article">
				<view class="question">
					<u-tag :bg-color="theme.lightColor" :border-color="theme.faBorderColor" :color="theme.bgColor" text="文" mode="light" size="mini" />
					<text class="u-m-l-20">{{ item.article && item.article.title }}</text>
				</view>
				<view class="u-m-t-30 u-tips-color u-font-22 u-line-3">
					<u-parse :html="item.article && item.article.summary" :tag-style="vuex_parse_style" :domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''" @linkpress="navigate"></u-parse>
				</view>
			</view>
		</view>
		<!-- 空数据 -->
		<wanl-empty style="padding:0;" v-if="isempty"></wanl-empty>
		<!-- 加载更多 -->
		<view class="u-p-t-10 u-p-b-30" v-if="!has_more && !isempty"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import {others} from '@/common/fa.mixin.js'
export default {
	mixins:[others],
	computed: {
		isempty() {
			if (!this.current && !this.questionList.length) {
				return true;
			}
			if (this.current == 1 && !this.answerList.length) {
				return true;
			}
			if (this.current == 2 && !this.articleList.length) {
				return true;
			}
			return false;
		}
	},
	onLoad() {
		this.getUserCollection();
	},
	data() {
		return {
			barwidth: 150,
			list: [
				{
					name: '我收藏的问题',
					text: 'question'
				},
				{
					name: '我收藏的回答',
					text: 'answer'
				},
				{
					name: '我收藏的文章',
					text: 'article'
				}
			],
			current: 0,
			scrollTop: 0,
			questionList: [],
			answerList: [],
			articleList: [],
			page: 1,
			has_more: false,
			status: 'loadmore'
		};
	},
	methods: {
		change(index) {
			this.current = index;
			this.barwidth = this.$util.strlen(this.list[index].name) * 30;
			this.page = 1;
			this.is_again = true;
			if (!index && !this.questionList.length) {
				this.getUserCollection();
			}
			if (index == 1 && !this.answerList.length) {
				this.getUserCollection();
			}
			if (index == 2 && !this.articleList.length) {
				this.getUserCollection();
			}
		},
		getUserCollection: async function() {
			let res = await this.$api.getUserCollection({
				id: this.vuex_user.id,
				type: this.list[this.current].text,
				page: this.page
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			switch (this.current) {
				case 0:
					this.questionList = [...this.questionList, ...res.data.data];
					break;
				case 1:
					this.answerList = [...this.answerList, ...res.data.data];
					break;
				case 2:
					this.articleList = [...this.articleList, ...res.data.data];
					break;
			}
			this.has_more = res.data.last_page < res.data.current_page;
		},
		goPage(index, id) {
			let p = [{ path: `/pages/community/question/detail?id=${id}` }, { path:`/pages/community/article/detail?id=${id}` }];
			this.$wanlshop.to(p[index].path);
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getUserCollection();
		}
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}

.answer-item {
	background-color: #ffffff;
	box-shadow: 0 0 5px rgba(0, 134, 243, 0.1);
	border-radius: 3px;
}
</style>
